﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxScheduler#custom-fields">
<CodeSnippetTabPage Text="Razor">
@(@"<DxScheduler StartDate=""@DateTime.Today""
             DataStorage=""@DataStorage""
             ActiveViewType=""SchedulerViewType.WorkWeek""
             AppointmentFormShowing=""OnAppointmentFormShowing""
             ValidateEditForm=""true""
             CssClass=""mw-1100"">
    <Views>
        <DxSchedulerWorkWeekView VisibleTime=""@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19)))"">
            <HorizontalAppointmentTemplate>
                <div class=""demo-sc-apt @((bool)context.CustomFields[""IsAccepted""] ? ""demo-sc-accepted "" : """")"" style=""width: 100%;"">
                    <div class=""card demo-apt-bg dx-purple-color"" style=""width: 100%;""></div>
                    <div class=""card shadow-sm p-1 demo-sc-apt-content text-white"" style=""width:100%;"">
                        @context.Appointment.Subject
                    </div>
                </div>
            </HorizontalAppointmentTemplate>
            <VerticalAppointmentTemplate>
                <div class=""shadow-sm demo-sc-apt @((bool)context.CustomFields[""IsAccepted""] ? ""demo-sc-accepted"" : """")"">
                    <div class=""card demo-apt-bg dx-purple-color""></div>
                    <div class=""card demo-sc-apt-content text-white"">
                        <div class=""card demo-sc-status-container"">
                            <div class=""card demo-apt-status dx-purple-color""></div>
                        </div>
                        <div class=""demo-apt-subject"">
                            @context.Appointment.Subject
                        </div>
                    </div>
                </div>
            </VerticalAppointmentTemplate>
        </DxSchedulerWorkWeekView>
    </Views>
    <AppointmentFormLayout Context=""formInfo"">
        <DxSchedulerSubjectFormLayoutItem></DxSchedulerSubjectFormLayoutItem>
        <DxSchedulerAllDayFormLayoutItem></DxSchedulerAllDayFormLayoutItem>
        <DxSchedulerStartDateFormLayoutItem></DxSchedulerStartDateFormLayoutItem>
        <DxSchedulerStartTimeFormLayoutItem></DxSchedulerStartTimeFormLayoutItem>
        <DxSchedulerEndDateFormLayoutItem></DxSchedulerEndDateFormLayoutItem>
        <DxSchedulerEndTimeFormLayoutItem></DxSchedulerEndTimeFormLayoutItem>
        <DxSchedulerLocationFormLayoutItem></DxSchedulerLocationFormLayoutItem>
        <DxSchedulerDescriptionFormLayoutItem></DxSchedulerDescriptionFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd=""12"">
            <Template>
                <div style=""margin-left: auto; margin-top: 14px;"">
                    <DxCheckBox @bind-Checked=""@(((CustomAppointmentFormInfo)formInfo).IsAccepted)""
                        Alignment=""CheckBoxContentAlignment.Right"">Accept</DxCheckBox>
                </div>
            </Template>
        </DxSchedulerCustomFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd=""12"">
            <Template>
                <ValidationSummary />
            </Template>
        </DxSchedulerCustomFormLayoutItem>
    </AppointmentFormLayout>
    <AppointmentCompactFormLayout Context=""formInfo"">
        <DxSchedulerSubjectFormLayoutItem></DxSchedulerSubjectFormLayoutItem>
        <DxSchedulerAllDayFormLayoutItem></DxSchedulerAllDayFormLayoutItem>
        <DxSchedulerStartDateFormLayoutItem></DxSchedulerStartDateFormLayoutItem>
        <DxSchedulerStartTimeFormLayoutItem></DxSchedulerStartTimeFormLayoutItem>
        <DxSchedulerEndDateFormLayoutItem></DxSchedulerEndDateFormLayoutItem>
        <DxSchedulerEndTimeFormLayoutItem></DxSchedulerEndTimeFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd=""12"">
            <Template>
                <div style=""margin-left: auto; margin-top: 14px;"">
                    <DxCheckBox @bind-Checked=""@(((CustomAppointmentFormInfo)formInfo).IsAccepted)""
                        Alignment=""CheckBoxContentAlignment.Right"">Accept</DxCheckBox>
                </div>
            </Template>
        </DxSchedulerCustomFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd=""12"">
            <Template>
                <ValidationSummary />
            </Template>
        </DxSchedulerCustomFormLayoutItem>
    </AppointmentCompactFormLayout>
</DxScheduler>

@code {
    public class CustomAppointmentFormInfo : SchedulerAppointmentFormInfo {
        public CustomAppointmentFormInfo(DxSchedulerAppointmentItem AppointmentItem, DxSchedulerDataStorage DataStorage)
            : base(AppointmentItem, DataStorage) { }

        [Required]
        public override string Subject {
            get { return base.Subject; }
            set { base.Subject = value; }
        }

        public bool IsAccepted {
            get { return (bool)CustomFields[""IsAccepted""]; }
            set { CustomFields[""IsAccepted""] = value; }
        }
    }

    void OnAppointmentFormShowing(SchedulerAppointmentFormEventArgs args) {
        args.FormInfo = new CustomAppointmentFormInfo(args.Appointment, DataStorage);
    }

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = ""AppointmentType"",
            Start = ""StartDate"",
            End = ""EndDate"",
            Subject = ""Caption"",
            AllDay = ""AllDay"",
            Location = ""Location"",
            Description = ""Description"",
            CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                new DxSchedulerCustomFieldMapping { Name = ""IsAccepted"", Mapping = ""Accepted"" }
            }
        }
    };
}")
</CodeSnippetTabPage>
<CodeSnippetTabPage Text="Appointment">
@(@"public class Appointment {
    public Appointment() {}

    public int AppointmentType { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Caption { get; set; }
    public string Description { get; set; }
    public string Location { get; set; }
    public int Label { get; set; }
    public int Status { get; set; }
    public bool AllDay { get; set; }
    public string Recurrence { get; set; }

    public bool Accepted { get; set; }
}")
</CodeSnippetTabPage>
<CodeSnippetTabPage Text="AppointmentCollection">
@(@"public static partial class AppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTimeUtils.CreateWeekStart();
        var dataSource = new List<Appointment>() {
                new Appointment {
                    Caption = ""Install New Router in Dev Room"",
                    StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 12, 30, 0)),
                    Label = 6,
                    Status = 4
                },
                new Appointment {
                    Caption = ""Upgrade Personal Computers"",
                    StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 15, 30, 0)),
                    Label = 1,
                    Status = 4
                },
                new Appointment {
                    Caption = ""Website Re-Design Plan"",
                    StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                    EndDate = date + (new TimeSpan(1, 12, 0, 0)),
                    Label = 1,
                    Status = 1,
                    Accepted = true
                },
                new Appointment {
                    Caption = ""New Brochures"",
                    StartDate = date + (new TimeSpan(1, 13, 30, 0)),
                    EndDate = date + (new TimeSpan(1, 15, 15, 0)),
                    Label = 8,
                    Status = 2,
                    Accepted = true
                },
                new Appointment {
                    Caption = ""Book Flights to San Fran for Sales Trip"",
                    StartDate = date + (new TimeSpan(1, 12, 0, 0)),
                    EndDate = date + (new TimeSpan(1, 13, 0, 0)),
                    AllDay = true,
                    Label = 8,
                    Status = 1
                },
                new Appointment {
                    Caption = ""Approve Personal Computer Upgrade Plan"",
                    StartDate = date + (new TimeSpan(2, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(2, 13, 0, 0)),
                    Label = 8,
                    Status = 2
                },
                new Appointment {
                    Caption = ""Final Budget Review"",
                    StartDate = date + (new TimeSpan(2, 14, 0, 0)),
                    EndDate = date + (new TimeSpan(2, 16, 30, 0)),
                    Label = 1,
                    Status = 1
                },
                new Appointment {
                    Caption = ""Install New Database"",
                    StartDate = date + (new TimeSpan(3, 9, 45, 0)),
                    EndDate = date + (new TimeSpan(3, 11, 45, 0)),
                    Label = 6,
                    Status = 4,
                    Accepted = true
                },
                new Appointment {
                    Caption = ""Approve New Online Marketing Strategy"",
                    StartDate = date + (new TimeSpan(3, 12, 30, 0)),
                    EndDate = date + (new TimeSpan(3, 15, 30, 0)),
                    Label = 1,
                    Status = 1,
                    Accepted = true
                },
                new Appointment {
                    Caption = ""Customer Workshop"",
                    StartDate = date + (new TimeSpan(4, 11, 0, 0)),
                    EndDate = date + (new TimeSpan(4, 12, 0, 0)),
                    AllDay = true,
                    Label = 8,
                    Status = 1
                },
                new Appointment {
                    Caption = ""Prepare 2021 Marketing Plan"",
                    StartDate = date + (new TimeSpan(4, 10, 30, 0)),
                    EndDate = date + (new TimeSpan(4, 13, 0, 0)),
                    Label = 1,
                    Status = 1,
                    Accepted = true
                },
                new Appointment {
                    Caption = ""Brochure Design Review"",
                    StartDate = date + (new TimeSpan(4, 14, 0, 0)),
                    EndDate = date + (new TimeSpan(4, 16, 30, 0)),
                    Label = 1,
                    Status = 2,
                    Accepted = true
                },
                new Appointment {
                    Caption = ""Create Icons for Website"",
                    StartDate = date + (new TimeSpan(5, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(5, 12, 30, 0)),
                    Label = 1,
                    Status = 1
                },
                new Appointment {
                    Caption = ""Launch New Website"",
                    StartDate = date + (new TimeSpan(5, 13, 20, 0)),
                    EndDate = date + (new TimeSpan(5, 16, 0, 0)),
                    Label = 8,
                    Status = 1
                },
                new Appointment {
                    Caption = ""Upgrade Server Hardware"",
                    StartDate = date + (new TimeSpan(6, 11, 0, 0)),
                    EndDate = date + (new TimeSpan(6, 13, 30, 0)),
                    Label = 8,
                    Status = 1
                }
            };
        return dataSource;
    }
}")
</CodeSnippetTabPage>
</CodeSnippetTabbed>
